<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/theme.css}">
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding: 5px;
            border: 1px #f60 solid;
            margin: 0 4.5px;
        }

        #typeList :not(:first-child) {
            margin-top: 20px;
        }

        .label-text {
            margin: 0 10.5px;
        }

        .panel {
            border-radius: 0;
        }

        h3.break {
            font-size: 16px;
            display: block;
            white-space: nowrap;
            word-wrap: normal;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        h3.break > a {
            text-decoration: none;
        }
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/" style="font-size:32px;">互联网医药平台</a>
                </div>
                <div th:if="${session.user == null}" id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/default/log">登录</a></li>
                        <li><a href="/default/reg">注册</a></li>
                    </ul>
                </div>
                <div th:if="${session.user != null}" id="navbar1" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                                class="glyphicon glyphicon-user"></i><span
                                th:text="${session.user.getUserName()}"></span><span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#"><i class="glyphicon glyphicon-scale"></i> 我的信息</a></li>
                                <li class="divider"></li>
                                <li><a href="/user/outLogin"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a rel="nofollow" href="index.html"><i class="glyphicon glyphicon-home"></i> 首页</a>
                            </li>
                            <li class="active">
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-th-large"></i>
                                    药品库</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="javascript:;"><i
                                        class="glyphicon glyphicon-chevron-up"></i>
                                    药品排行</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-search"></i>
                                    疾病找药</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-user"></i>
                                    用药心得</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-plane"></i>
                                    用药方案</a>
                            </li>
                            <li>
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-random"></i>
                                    资讯频道</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul id="typeList" style="list-style: none;">
                            <li>分类：
                                <span name="0" class="label-type">全部</span>
                                <span name="1" class="label-text">中药</span>
                                <span name="2" class="label-text">西药</span>
                                <span name="3" class="label-text">中成药</span>
                                <span name="4" class="label-text">生物制药</span>
                                <span name="5" class="label-text">药用辅料</span>
                                <span name="6" class="label-text">保健品</span>
                            </li>
                            <li>排序：
                                <span name="default" class="label-type">综合排序</span>
                                <span name="new" class="label-text">最新上线</span>
                                <span name="moneyUp" class="label-text">价钱升序</span>
                                <span name="moneyDown" class="label-text">价钱降序</span>
                                <span name="salesUp" class="label-text">销量升序</span>
                                <span name="salesDown" class="label-text">销量降序</span>
                            </li>
                        </ul>
                    </div>
                    <div class="panel-footer" style="height:50px;padding:0;">
                        <div style="float:left;padding:15px;">
                            <span style="color: #00AA88" th:text="${'以下药品均符合国家安全标准'}"></span>
                        </div>
                        <div style="float:right;">
                            <form class="navbar-form navbar-left" role="search">
                                <div class="form-group">
                                    <input name="fuzzy" type="text" class="form-control" placeholder="请输入搜索内容">
                                </div>
                                <span id="search" class="btn btn-default"><i
                                        class="glyphicon glyphicon-search"></i>
                                    搜索
                                </span>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row" id="showDrug">



                </div>
            </div>
        </div>
    </div>

        <div class="panel-body">
            <div class="table-responsive" id="page">

            </div>
        </div>
    </div>


    <div class="container " style="margin-top:20px;">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="http://www.qf.com">关于我们</a> | <a rel="nofollow"
                                                                                 href="http://www.qf.com">服务条款</a> | <a
                            rel="nofollow" href="http://www.qf.com">免责声明</a> | <a rel="nofollow"
                                                                                  href="http://www.qf.com">网站地图</a> | <a
                            rel="nofollow" href="http://www.qf.com">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2010-2014qf.com 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div> <!-- /container -->
<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/script/docs.min.js}"></script>
<script th:src="@{/script/back-to-top.js}"></script>
<script>
    $(function () {
        var temp = null;
        var fuzzy = null;
        var page = null;
        $.ajax({
            url: '/drug/show',
            type: 'POST',
            success: function (data, status) {
                show(data);
                pages(data);
            }
        });
        $("span").click(function () {
            temp = $(this).attr("class");
            fuzzy=null;
            if (temp == 'label-type') {
                $(this).attr("class", "label-text");
                $(this).siblings("span").attr("class", "label-text");
                $(this).siblings("span").first().attr("class", "label-type");
            }
            if (temp == 'label-text') {
                $(this).attr("class", "label-type");
                $(this).siblings("span").attr("class", "label-text");
                $(this).siblings("span").first().attr("class", "label-text");
            }
            var allType = $("span[name='0']").attr("class");
            var allSort = $("span[name='default']").attr("class");
            temp = $(this).attr("name");
            //console.log(temp);
            $.ajax({
                url: '/drug/show',
                data: {
                    page :page,
                    drugTypeId: temp
                },
                type: 'POST',
                success: function (data, status) {
                    show(data);
                    pages(data);
                }
            });
            //console.log($(this).attr("name"));
            if (allType == 'label-type') {
                console.log("2222222222222222222222222222");
            }
            if (allSort == 'label-type') {
                console.log("11111111111111111111111111111");
            }
        });

        $("#search").click(function () {
            fuzzy = $("input[name='fuzzy']").val();
            $("span").attr("class", "label-text");
            $("span[name=0]").attr("class", "label-type");
            $("span[name='default']").attr("class", "label-type");
            //console.log(fuzzy);
            $.ajax({
                url: '/drug/show',
                data: {
                    fuzzy: fuzzy,
                    page :page,
                    drugTypeId: temp
                },
                type: 'POST',
                success: function (data) {
                    show(data);
                    pages(data);
                }
            });
        });
        $('body').on('click', '.pageCount', function() {
            var page = $(this).attr("name");
            console.log(temp+"=============================="+fuzzy);
            $.ajax({
                url: '/drug/show',
                data: {
                    page :page,
                    fuzzy:fuzzy,
                    drugTypeId: temp
                },
                type: 'POST',
                success: function (data) {
                    show(data);
                    pages(data);
                }
            });
        });

        function show(data) {
            var html = '';
            for (var i = 0; i < data.list.length; i++) {
                html +=
                    '<div class="col-md-3">'+
                    '<div class="thumbnail">' +
                    '<img alt="300x200" src="img/product-1.jpg"/>' +
                    '<div class="caption">' +
                    '<h3 class="break">' +
                    '<a class="drugshow" onsubmit="return false" href="javascript:;" name="'+data.list[i].drugId+'">'+data.list[i].drugName+'</a>' +
                    '</h3>' +
                    '<p>' +
                    '<div style="float:left;">' +
                    '价格:'+data.list[i].drugPrice +
                    '</div>' +
                    '</p>' +
                    '<br>' +
                    '<div>' +
                    '<span style="float:right;">生产日期:'+data.list[i].drugCreateDate+'</span>' +
                    '<span>销量: '+data.list[i].drugSales+'</span>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';
            }
            $("#showDrug").html(html);
        };
        $("#showDrug").on('click','.drugshow',function () {
            var drugId = $(this).attr("name");
            window.location.href = "/drug/project?id="+$(this).attr("name");
        });
        function pages(data) {
            var html='';
            html+=
                '<div class="table-responsive">' +
                '<table class="table  table-bordered"><tr><td colspan="7" align="center">当前' +
                data.pageNum  + '页,总' + data.pages + '页,总' + data.total + '条记录</td></tr>' +
                '<tr><td colspan="7" align="center"><ul class="pagination">' +
                '<li><a class="pageCount" name="1">首页</a></li>' ;

            if (data.hasPreviousPage)   {
                    html+='<li><a class="pageCount" name="'+data.prePage+'" aria-label="Previous">' +
                        '<span aria-hidden="true">&laquo;</span></a></li>';
                }

                for (var i=0;i<data.navigatepageNums.length;i++){
                //console.log(data.navigatepageNums[i]);

                    if (data.navigatepageNums[i] == data.pageNum){
                    html+=
                        '<li class="active"><a href="#">'+data.navigatepageNums[i] +'</a></li>'
                }else {
                    html+=
                        '<li><a href="#" class="pageCount" name="'+data.navigatepageNums[i]+'">'+data.navigatepageNums[i]+'</a></li>'
                }
            }
            if (data.hasNextPage) {
                html+='<li><a class="pageCount" name="'+data.nextPage+'" aria-label="Next">' +
                    '<span aria-hidden="true">&raquo;</span></a></li>';
            }
            html+=
                '<li><li>' +
                '<a class="pageCount" name="'+data.pages+'">末页</a>' +
                '</li></ul></tr></tfoot></table></div>';
            $("#page").html(html);
        }

    });
</script>
</body>
</html>